<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular>
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image src="../../static/image/banner1.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- banner  end-->
		<view class="contact">
			<view class="contact-title pt-10">
				<text>青书自习室A区</text>
				<view class="button">
					切换门店
				</view>
			</view>
			<view class="contact-content flex mt-10">
				<view class="content-left">
					<view class="flex flex-align">
						<view class="iconfont icon-shizhong"></view>
						<text>00:00~24:00</text>
					</view>
					<view class="flex mt-10">
						<text class="iconfont icon-weibiaoti-3"></text>
						<text>成都高新区天目路77号8栋1单元5楼531号(583m)</text>
					</view>
				</view>
				<view class="content-right flex">
					<view class="flex-item navigation iconfont icon-daohang"></view>
					<view class="flex-item telephone iconfont icon-dianhua"></view>
				</view>
			</view>
		</view>
		<!-- contact end-->
		<view class="main-function flex mt-20">
			<view class="group-purchase flex-item flex-col ">
				<view class="iconfont icon-tiaoxingmasaomiaoshibie"></view>
				<text>团购验巻</text>
				<view>急速充值</view>
			</view>
			<view class="reservation flex-item  flex-col">
				<view class="iconfont icon-yuyue"></view>
				<text>预约</text>
				<view class="">快速选座</view>
			</view>
			<view class="individual flex-item flex-col">
				<view class="iconfont icon-fuli"></view>
				<text>个人中心</text>
				<view>账户信息</view>
			</view>
		</view>
		<!-- main-function end -->
		<view class="basic-function mt-20 ">
			<uni-section title="功能" type="line" titleFontSize="36rpx"></uni-section>
			<!-- <view class="function-title pl-25">
				<view class="tag"></view>
				<text>功能</text>
			</view> -->
			<view class="function-content">
				<view v-for="(item, index) in list" :key="index">
					<view class="iconfont" :class="item.icon"></view>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
		<!-- basic-function end -->
		<view class="mt-20">
			<view class="nav">
				<view class="flex">
					<view class="flex-item" v-for="(item, index) in navlist" :key="index" @click="changeTab(index)">{{
						item.title }}</view>
				</view>
			</view>
			<scroll-view :scroll-into-view="toViews" scroll-y style="height: 1000rpx;" scroll-with-animation>
				<view class="note" :id="'anchor1'">
					<!-- <view class="function-title pl-25">
						<view class="tag"></view>
						<text>注意事项</text>
					</view> -->
					<uni-section title="注意事项" type="line" titleFontSize="34rpx"></uni-section>

					<view class="note-content"></view>
				</view>
				<view class="process" :id="'anchor2'">
					<!-- <view class="function-title pl-25">
						<view class="tag"></view>
						<text>体验流程</text>
					</view> -->
					<uni-section title="体验流程" type="line" titleFontSize="34rpx"></uni-section>
					<view class="process-content">
						<view class="flex" v-for="(item, index) in processList" :key="index">
							<view :class="item.icon" class="process-icon iconfont"></view>
							<text>{{ item.detail }}</text>
						</view>
					</view>
				</view>
				<view class="room" :id="'anchor3'">
					<!-- <view class="function-title pl-25">
						<view class="tag"></view>
						<text>青书自习室</text>
					</view> -->
					<uni-section title="青书自习室" type="line" titleFontSize="34rpx"></uni-section>
					<view class="room-content">
						<text>
							借用区：
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="activitiesList">
			<!-- <view class="function-title pl-25">
				<view class="tag"></view>
				<text>活动列表</text>
			</view> -->
			<uni-section title="活动列表" type="line" titleFontSize="34rpx"></uni-section>
			<view class="activitiesList-content"></view>
		</view>
		<view class="personal">--王远坤--</view>
	</view>
	<view class="open">
		<view class="iconfont icon-peizhitubiaosvg-"></view>
		<text>开门</text>
	</view>
	<view class="renew">
		<view class="iconfont icon-shizhong"></view>
		<text>续单</text>
	</view>
	<view class="customer-service" @click="open">
		<view class="iconfont icon-dianhuaTelephone"></view>
		<text>客服</text>
	</view>
	<uni-popup ref="popup" type="bottom">
		<view class="bottom-popup"></view>
	</uni-popup>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{ icon: "icon-dianzikajuan-xian", text: "卡卷兑换" },
				{ icon: "icon-remai", text: "热卖套餐" },
				{ icon: "icon-shujupaihang", text: "自习排行" },
				{ icon: "icon-wendangchaxun", text: "使用记录" },
				{ icon: "icon-dingdan", text: "订单列表" },
				{ icon: "icon-wentiquestions1", text: "常见问题" },
				{ icon: "", text: "" },
				{ icon: "", text: "" }
			],
			navlist: [{ title: "注意事项" }, { title: "体验流程" }, { title: "青书自习室" }],
			toViews: '',
			processList: [
				{ icon: "icon-xiadan01", detail: "1.小程序预约下单，预定包间。" },
				{ icon: "icon-peizhitubiaosvg-", detail: "2.到达门店，点击【开门】完成签到，将自动开门开灯。" },
				{ icon: "icon-shuji", detail: "3.到达包间，打开包间门禁，享受美好时光。" },
				{ icon: "icon-24gl-extractLeft", detail: "4.时间到，请在断电前代号随身物品离店。" }
			]
		}
	},
	onLoad() {

	},
	methods: {
		changeTab(resIndex) {
			this.$nextTick(() => {
				this.toViews = `anchor${resIndex + 1}`;
				console.log(this.toViews, resIndex);
			})

		},
		open() {
			this.$refs.popup.open('bottom');
		}
	},
}
</script>
<style>
</style>
<style lang="scss" scoped>
@keyframes underlineAnimation {
	0% {
		transform: scaleX(0);
	}

	50% {
		transform: scaleX(0.5);
	}

	100% {
		transform: scaleX(1);
	}
}

.uni-margin-wrap {
	width: 100%;
	height: 480rpx;
}

.swiper {
	height: 480rpx;
}



.swiper-item {
	display: block;
	height: 480rpx;
	line-height: 480rpx;
	text-align: center;
}

.uni-bg-red>image {
	width: 100%;
	height: 100%;
}

/* banner end */
.contact {
	padding: 0 20rpx;
	width: 100%;
	height: 200rpx;
	background-color: #fff;
	box-sizing: border-box;
}

.contact-title text {
	font-size: 40rpx;
	font-weight: 600;
}

.contact-title .button {
	display: inline-block;
	margin-left: 20rpx;
	font-size: 28rpx;
	width: 125rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	color: #fff;
	border-radius: 50px;
	background-color: #008aff;
}

.content-left {
	flex: 0.8;
}

.content-right {
	flex: 0.2;
}

.navigation {
	margin: 10rpx 10rpx;
	height: 60rpx;
	width: 60rpx;
	color: #fff;
	background-color: #008aff;
	line-height: 60rpx;
	border: 2rpx solid rgb(105, 151, 192);
	border-radius: 50%;
	text-align: center;
}

.telephone {
	margin: 10rpx 10rpx;
	height: 60rpx;
	width: 60rpx;
	color: #fff;
	background-color: #008aff;
	line-height: 60rpx;
	border-radius: 50%;
	border: 2rpx solid rgb(105, 151, 192);
	text-align: center;
}

.main-function {
	height: 225rpx;
	text-align: center;
	background-color: #fff;
	box-sizing: border-box;
}

.main-function .iconfont {
	color: #008aff;
	font-size: 60rpx;
}

.main-function view view:first-child {
	line-height: 115rpx;
	height: 115rpx;
}

.main-function view text {
	font-size: 30rpx;
	font-weight: 500;
}

.main-function view view:last-child {
	padding-top: 10rpx;
	font-size: 26rpx;
	color: #c0c0c0;
}

.basic-function {
	background-color: #fff;
}
// main function end
.basic-function,
.note,
.process,
.room,
.activitiesList {
	::v-deep .uni-section {
		border-bottom: 1px solid #f1f1f1;
		.uni-section-header {
			font-weight: 600;
		}
		.uni-section-header__decoration {
			&.line {
				width: 16rpx;
				height: 40rpx;
			}
		}
	}
}

.function-content {
	height: 360rpx;
	text-align: center;
}

.function-content>view>view {
	color: #008aff;
	line-height: 120rpx;
	font-size: 52rpx;

}

.function-content>view {

	float: left;
	width: 25%;
	height: 180rpx;
}

.function-content>view>view {
	width: 100%;
	height: 100rpx;
}

.nav {
	height: 95rpx;
	background-color: #fff;
}

.nav>view {
	text-align: center;
	width: 80%;
	margin: 0 auto;
}

.nav>view>view {
	position: relative;
	display: inline-block;
	height: 95rpx;
	line-height: 95rpx;
}

.nav>view>view:hover {
	color: #008aff;
}

.nav>view>view:hover::after {
	content: "";
	left: 50rpx;
	bottom: 2rpx;
	position: absolute;
	width: 100rpx;
	height: 4rpx;
	background-color: #008aff;
	animation: underlineAnimation .3s 1;
}
.note-content {
	margin: 30rpx;
	height: 300rpx;
	border-radius: 6%;
	background-color: #fff;
}


.process-content {
	padding-top: 10rpx;
	margin: 30rpx;
	height: 500rpx;
	border-radius: 6%;
	background-color: #fff;
}

.process-content>view {
	width: 95%;
	height: 80rpx;
	margin: 30rpx 20rpx;
	text-align: center;
	line-height: 75rpx;
}

.process-content>view>view {

	color: #fff;
}

.process-content>view>text {
	margin-left: 20rpx;
	font-size: 22rpx;
}

.process-icon {
	width: 80rpx;
	height: 80rpx;
	background-color: #338dfd;
	border-radius: 50%;
}

.room {}

.room-content {
	margin: 30rpx;
	height: 500rpx;
	border-radius: 6%;
	background-color: #fff;
}

.activitiesList {
	background-color: #fff;
}

.activitiesList-content {
	margin: 30rpx auto;
	width: 80%;
	height: 250rpx;
	border-radius: 30rpx;
	background-color: #de8d23;
}

.personal {
	font-size: 30rpx;
	padding-right: 100rpx;
	line-height: 100rpx;
	text-align: right;
	height: 100rpx;
	color: #8a8888;
}

.open,
.renew,
.customer-service {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	text-align: center;
	line-height: 50rpx;
	font-size: 26rpx;
	box-shadow: 15rpx 10rpx 20rpx 0rpx rgba(88, 87, 87, 0.3);
}

.open {
	position: fixed;
	bottom: 350rpx;
	right: 30rpx;
	color: #fff;
	background-color: #378aff;
}

.renew {
	position: fixed;
	bottom: 230rpx;
	right: 30rpx;
	background-color: #fff;
	color: #378aff;
}

.customer-service {
	position: fixed;
	bottom: 120rpx;
	right: 30rpx;
	background-color: #fff;
	color: #378aff;
}
.bottom-popup {
	border-radius: 20rpx;
	height: 500rpx;
	background-color: #fff;
	z-index: 999;
}
</style>